<template>
    <view class="reward">

      <scroll-view class="scroll-view"
                   refresher-default-style="none"
                   :scroll-y="true"
                   :scroll-with-animation="true"
                   :scroll-top="0">
        <!--头部-->
        <view class="header">
          <!--头部内容-->
          <view class="header_content" :class="scHeight > 0 ? 'active_header' : ''">
            <!--定位-->
            <view @click="goTop" class="header_navbar">
              <u-navbar title="赏金广场" :is-back="false" title-color="#ffffff" background="none" :is-fixed="false" :border-bottom="false">
                <view class="slot-wrap">
                  <!-- 导航栏 - 地址选择 -->
                  <view class="nav_bar u-flex" @click="Toaddres()" >
                    <u-icon name="map" color="#FFFFFF" size="40"></u-icon>
                    <view class="address ellipsis-one-line">{{ Address }}</view>
                    <u-icon name="arrow-right" color="#FFFFFF" size="24"></u-icon>
                  </view>
                </view>
              </u-navbar>
            </view>
            <!--浮动tab内容 -->
            <view v-if="scHeight > bannerHeight - header_height" class="float_box">
              <view class="tab_float_box">
                <view v-for="(item, index) in tabs_data" :key="index" @click="clickMenu(item.tab_index)" class="tab_float_item" >
                  <image :src="imgPathUrl + item.image" mode="widthFix" style="width: 54rpx;height: 54rpx;"></image>
                  <view class="tab_float_item_text" :style="{fontWeight: header_index === item.tab_index ? 'bold' : 'normal'}">
                    {{ item.title }}</view>
                  <text v-if="header_index===item.tab_index" class="active_line"></text>
                </view>
              </view>
              <!--浮动筛选-->
              <view v-if="scHeight > bannerHeight + processHeight - header_height - 50" class="filter_float" >
                <FloatFilter
                    :selectObj="selectObj"
                    :selectHeight="bannerHeight+processHeight-header_height-filterHeight"
                    floatColor="#ffffff"
                    @FClickTabFun="FClickTabFun"
                    @FClickSelectFun="FClickSelectFun"
                />
              </view>
            </view>
          </view>
        </view>
        <!--主题内容-->
        <view class="reward_content">
          <view class="header_bg">
            <image :src="imgPathUrl + '/reward/reward_top_bg.png'" mode="heightFix" style="height: 500rpx;"></image>
          </view>
          <!--主题内容box-->
          <view class="reward_content_box">
            <!--填补header高度-->
            <view class="header_height" :style="{height: header_height + 'px'}"></view>
            <!--banner v-for="(item, index) in bannerList" :key="index"-->
            <view class="header_banner">
              <swiper class="swiper" :current="bannerCurrent" next-margin="0" previous-margin="0rpx" >
                <swiper-item v-for="(item,index) in bannerList" :key="index">
                  <view v-if="index === 0">
                    <image :src="imgPathUrl + item.image" mode="heightFix" style="height: 74rpx;margin-bottom: 20rpx;"></image>
                    <image :src="imgPathUrl + item.image2" mode="heightFix" style="height: 86rpx;"></image>
                  </view>
                  <view v-else>
                    <image :src="imgPathUrl + item.image" mode="heightFix" style="height: 124rpx;margin-bottom: 10rpx;"></image>
                    <image :src="imgPathUrl + item.image2" mode="heightFix" style="height: 86rpx;"></image>
                  </view>
                </swiper-item>
              </swiper>
              <!--<image :src="imgPathUrl + '/reward/reward_top_banner_img01.png'" mode="heightFix" style="height: 74rpx;margin-bottom: 20rpx;"></image>
                    <image :src="imgPathUrl + '/reward/reward_top_banner_img02.png'" mode="heightFix" style="height: 86rpx;"></image>-->

            </view>
            <!--tab-->
            <view class="header_tab">
              <view class="header_tab_bg">
                <view v-for="(item, index) in tabs_data" :key="index" class="header_tab_bg_item">
                  <image v-if="header_index === item.tab_index" :src="imgPathUrl + item.bg_image"  style="width: 100%;height: 120rpx;"></image>
                </view>
              </view>
              <view class="header_tab_content">
                <view v-for="(item, index) in tabs_data" :key="index" @click="clickMenu(item.tab_index)" class="tab_item" >
                  <image :src="imgPathUrl + item.image" mode="widthFix" style="width: 54rpx;height: 54rpx;"></image>
                  <view class="tab_item_text" :style="{fontSize: header_index === item.tab_index ? '34rpx' : '28rpx',fontWeight: header_index === item.tab_index ? 'bold' : 'normal'}">
                    {{ item.title }}</view>
                  <view v-if="index === 1" class="tab_tip">奖励高</view>
                </view>
              </view>
            </view>
          </view>

        </view>
        <!--页面滚动到指定盒子-->
        <view class="scroll_to"></view>
        <!--报名流程-->
        <view class="sign_process">
          <view class="sign_process_box">
            <view v-for="(item, index) in sign_process_data" :key="index" class="sign_process_item">
              <view class="sign_process_item_left">
                <image v-if="header_index === 1" :src="imgPathUrl + item.image" mode="widthFix" style="width: 68rpx;height: 68rpx;"></image>
                <image v-else :src="imgPathUrl + item.image2" mode="widthFix" style="width: 68rpx;height: 68rpx;"></image>
                <view v-if="header_index === 1" class="sign_process_item_text">{{ item.title }}</view>
                <view v-else class="sign_process_item_text">{{ item.title2 }}</view>
              </view>
              <view v-if="index < sign_process_data.length - 1" class="sign_process_item_right">
                <image :src="imgPathUrl + item.icon" mode="widthFix" style="width: 48rpx;"></image>
              </view>
            </view>
          </view>
        </view>
        <!--筛选-->
        <view class="filter">
          <Filter
              :selectObj="selectObj"
              :selectHeight="bannerHeight+processHeight-header_height-filterHeight"
              @clickTabFun="clickTabFun"
              @clickSelectFun="clickSelectFun"
          />
        </view>
        <!--列表内容-->
        <view class="list">
          <!--填补高度-->
          <view style="height: 30rpx"></view>
          <!--渐变背景-->
          <view class="list_bg"></view>
          <!--列表数据内容-->
          <view class="list_box">
            <!-- 加载中提示 -->
            <view class="lanjiazai_wrap" v-if="skeletonLoading">
              <view class="lanjiazai_item">
                <view class="loading_icon">
                  <image :src="BestImgUrl + '/index/logo_loading.gif'" class="loading_gif" mode="widthFix"></image>
                </view>
                <view class="tag">加载中...</view>
              </view>
            </view>
            <view v-if="!skeletonLoading">
              <view class="shop_list_wrap" v-if="taskLists.length != 0">
                <!--引入列表组件-->
                <rewardList :shopList="taskLists" />
                <view class="chudijiazai">
                  <u-loadmore icon-type="flower" :status="loadingstatus" font-size="24" :load-text="loadText" margin-top="60"
                              margin-bottom="60"/>
                  <view v-if="Bottomingrefresh == true" class="Bottomingrefresh" @click="RefreshBtn()" style="text-align: center;">立即刷新</view>
                </view>
              </view>
              <!-- 暂无店铺提示 -->
              <view v-else-if="taskLists.length == 0 && failTimeOutShow == false" class="noData_box shop_list_wrap_height">
                <image :src="BestImgUrl + '/index/noData.png'" mode="widthFix" style="width: 60%"></image>
                <view v-if="Address == '正在定位...'">正在定位...</view>
                <view v-else>暂无店铺</view>
              </view>
              <!-- 网络错误提示 -->
              <view v-else-if="failTimeOutShow == true && taskLists.length == 0" class="noData_box shop_list_wrap_height">
                <image src="/static/images/Frame33412.png"></image>
                <view class="timeOut">
                  <view>网络好像出问题了~</view>
                  <view @click="refurbish()">立即刷新</view>
                </view>
              </view>
            </view>
          </view>

        </view>
      </scroll-view>

      <!--首页待提交订单号 autoplay="true" -->
      <view v-if="taskOrderList.length>0" class="toBeSubmit">
        <view class="toBeSubmit_box">
          <swiper class="swiper"  interval="5000" vertical="true" circular="true" style="height: 62rpx;">
            <swiper-item v-for="(item, index) in taskOrderList" :key="index" @tap="goToOrderNoteFun(item)" class="swiper_item">
              <view class="swiper_content">
                <view v-if="item.logo" class="toBeSubmit_img"><image :src="item.logo" mode="widthFix" style="width:62rpx"></image></view>
                <view class="toBeSubmit_content">
                  <view v-if="item.status === 7" class="toBeSubmit_text">待上传笔记</view>
                  <view class="toBeSubmit_time">
                    <u-count-down
                        :timestamp="findcountdown(item)"
                        :show-days="true"
                        :show-seconds="true"
                        :show-border="false"
                        :show-dayColon="true"
                        font-size="24"
                        color="#FFFFFF"
                        bgColor="none"
                        border-color="none"
                        separator="colon"
                        separator-size="20"
                        separator-color="#FFFFFF">
                    </u-count-down>
                  </view>
                </view>
              </view>
              <view class="toBeSubmit_icon"><u-icon name="arrow-right" size="22" color="#FFFFFF"></u-icon></view>
            </swiper-item>
          </swiper>

        </view>
      </view>

      <!--底部tabber-->
      <view class="tabbar_height" :style="{height: tabberHeight + 'px'}"></view>
      <view class="tabber">
        <tdTabbar :tabbarIndex="tabbarIndex" @updateTabbar="updateTabbar" />
      </view>

      <!-- 客服教程 -->
      <view class="server_box" >
        <!--<view @click="openService" class="help">
          <image :src="`https://td.lszbg.com/public/uploads/h5/home/kefu.png`" mode="widthFix" style="height:33rpx;width:33rpx"></image>
          <view style="color: #323232;font-size: 18rpx;">客服</view>
        </view>
        <view style="height: 10rpx"></view>
        <view
            @click="toNewUser" class="help">
          <image :src="`https://td.lszbg.com/public/uploads/h5/home/new_user.png`" mode="widthFix" style="height:33rpx;width:33rpx"></image>
          <view style="color: #323232;font-size: 18rpx;">教程</view>
        </view>
        <view style="height: 10rpx"></view>-->
        <view @click="goTop" class="scrollToTop">
          <image :src="`https://td.lszbg.com/public/uploads/h5/home/top.png`" mode="widthFix" style="height:38rpx;width:38rpx"></image>
        </view>
      </view>
    </view>
</template>

<script>
  import Filter from "@/components/reward/filter.vue";
  import FloatFilter from "@/components/reward/float-filter.vue";
  import rewardList from "@/components/reward/reward-list.vue";
  import tdTabbar from "@/components/td-tabbar/td-tabbar.vue";

  const app = getApp();
  export default {
    components: {tdTabbar, rewardList, Filter, FloatFilter},
    data() {
        return {
          imgPathUrl: app.globalData.imgurlBwc,
          BestImgUrl: app.globalData.imgurl,
          tabbarIndex: 3, // 底部tabbar索引
          tabberHeight: 0, // 底部tabber高度
          Address: '正在定位...',
          header_index: 1,//顶部导航栏索引
          scHeight: 0, // 页面滚动高度
          navHeight: 0, // 导航栏高度
          header_height: 0, //头部内容高度
          bannerHeight: 0, //banner高度
          processHeight: 0, // 流程高度
          filterHeight: 0, // 筛选高度
          /* tabs数据 */
          tabs_data: [
              {
                id: 1,
                title: '普通任务',
                tab_index: 1,
                image: '/reward/reward_tab_icon01.png',
                bg_image: '/reward/reward_tab_bg01.png'
              },
              {
                id: 2,
                title: '达人探店任务',
                tab_index: 2,
                image: '/reward/reward_tab_icon02.png',
                bg_image: '/reward/reward_tab_bg02.png'
              }
          ],
          /* banner数据 */
          bannerList: [
              {
                id: 1,
                image: '/reward/reward_top_banner_img01.png',
                image2: '/reward/reward_top_banner_img02.png',
                title: '普通任务',
                content: '任务内容',
              },
              {
                id: 2,
                image: '/reward/reward_top_banner_img03.png',
                image2: '/reward/reward_top_banner_img04.png',
                title: '达人任务',
                content: '任务内容',
              }
           ],
          bannerCurrent: 0,
          /* 报名流程数据 */
          sign_process_data: [
              {
                title: '报名活动',
                title2: '报名活动',
                image: '/reward/sign_process_img01.png',
                image2: '/reward/sign_process_img01.png',
                icon: '/reward/sign_process_arrow.png'
              },
              {
                title: '下载素材',
                title2: '购买套餐',
                image: '/reward/sign_process_img02.png',
                image2: '/reward/sign_process_img05.png',
                icon: '/reward/sign_process_arrow.png'
              },
              {
                title: '发布笔记',
                title2: '发布笔记',
                image: '/reward/sign_process_img03.png',
                image2: '/reward/sign_process_img03.png',
                icon: '/reward/sign_process_arrow.png'
              },
              {
                title: '审核到账',
                title2: '审核到账',
                image: '/reward/sign_process_img04.png',
                image2: '/reward/sign_process_img04.png',
                icon: '/reward/sign_process_arrow.png'
              },
          ],
          // 平台数据
          platformData: [
            {
              platformType: 1,
              title: '小红书',
              image: '/note/xhs@2x.png',
            },
            {
              platformType: 2,
              title: '抖音',
              image: '/note/dy@2x.png',
            },
            {
              platformType: 3,
              title: '大众点评',
              image: '/note/dzdp@2x.png',
            },
            {
              platformType: 4,
              title: '美团',
              image: '/note/mt@2x.png',
            },
          ],
          /* 筛选变量 */
          // 筛选tab选中状态
          selectObj: {
            selectVal: '',
            selectName: ''
          },
          taskLists: [],//任务列表数组变量
          taskOrderList: [], //报名列表数据
          pageSize: 1,
          pageNum: 10,
          order_By: 0,
          platforms: 0, //筛选平台
          skeletonLoading: true, //加载中图片
          Bottomingrefresh: false,
          loadingstatus: 'loading',
          loadText: {
            loadmore: '轻轻上拉',
            loading: '加载中...',
            nomore: '没有更多了'
          },
          failTimeOutShow: false,
          zanwuloc: true,
          AddressError_show: false,
        };
    },
    onLoad() {
      let that = this
      // tabbar的高度
      uni.createSelectorQuery().select('.tabber').boundingClientRect(rect => {
        console.log('tabbar高度==', rect.height)
        that.tabberHeight = rect.height
      }).exec();
      // 获取定位事件
      that.getplace()
      // 获取列表数据事件
      that.getListData()
      // 获取报名列表数据
      that.GetTaskOrders()
    },
    onShow() {
      let that = this
      // 获取头部内容高度
      uni.createSelectorQuery().select('.header_navbar').boundingClientRect(rect => {
        that.header_height = rect.height
        console.log('头部内容高度', rect.height)
      }).exec();

      // banner内容高度
      uni.createSelectorQuery().select('.reward_content_box').boundingClientRect(rect => {
        that.bannerHeight = rect.height
        // console.log('banner内容高度', rect.height)
      }).exec();
      // 头部nav高度
      uni.createSelectorQuery().select('.header_navbar').boundingClientRect(rect => {
        that.navHeight = rect.height
        // console.log('头部nav高度=', rect.height)
      }).exec();
      // 报名流程高度
      uni.createSelectorQuery().select('.sign_process').boundingClientRect(rect => {
        that.processHeight = rect.height
        // console.log('头部nav高度=', rect.height)
      }).exec();
      // 获取筛选的高度
      uni.createSelectorQuery().select('.filter').boundingClientRect(rect => {
        that.filterHeight = rect.height
        console.log('获取筛选的高度', rect.height)
      }).exec();
      // 页面加载刷新列表
      that.$nextTick(() => {
        console.log('当前页码=', that.pageSize)
        that.pageSize = 1
        that.getListData()
        that.scrollToTop(0)
      })
    },
    onPageScroll(e) {
      let that = this
      // 获取页面滚动高度
      that.scHeight = e.scrollTop
      // console.log('页面滚动高度', e.scrollTop)
    },
    //下拉刷新
    onPullDownRefresh() {
      let that = this
      that.category_id = ""
      if (that.zanwuloc == true) {
        that.skeletonLoading = true
        that.failTimeOutShow = false
        // 只看可选取消选中状态
        that.isShowSwitch = false
        // 筛选菜单取消选中状态
        that.selectObj = {
          selectVal: 0,
          selectName: '全部平台'
        }
        that.order_By = 0
        that.platforms = 0

        that.isShowFloat = 0
        that.pageSize = 1
        that.pageNum = 10
        setTimeout(function () {
          that.getListData()
          uni.stopPullDownRefresh();
        }, 1500);
      } else {
        setTimeout(function () {
          uni.stopPullDownRefresh();
        }, 1500);
      }

    },
    //触底加载
    onReachBottom() {
      console.log('触底加载')
      let that = this
      that.loadText.nomore = '没有更多了'
      that.Bottomingrefresh = false
      that.failTimeOutShow = false
      this.loadingstatus = 'loading';
      if (that.zanwuloc == true) {
        setTimeout(function () {
          that.pageSize++;
          that.getListData()
          uni.hideNavigationBarLoading()
        }, 500);
      } else {
        setTimeout(function () {
          uni.hideNavigationBarLoading()
        }, 500);
      }
    },
    methods: {
      // 底部tabbar 点击事件
      updateTabbar(e){
        this.tabbarIndex = e
      },
      // tab切换
      clickMenu(index){
        let that = this
        console.log('点击的index', index)
        that.header_index = index
        that.bannerCurrent = index-1
        that.skeletonLoading = true
        // 筛选菜单取消选中状态
        that.selectObj = {
          selectVal: 0,
          selectName: '全部平台'
        }
        that.order_By = 0
        that.platforms = 0
        setTimeout(function (){
          that.skeletonLoading = false
          that.taskLists = []
          that.pageSize = 1
          that.getListData()
        }, 1000)
      },
      // 页面滚动到顶部
      scrollToTop(i) {
        console.log('页面滚动的高度=', i)
        uni.pageScrollTo({
          // selector: '.scroll_to', // 需要滚动到的元素的id或class
          scrollTop: i,
          duration: 300 // 滚动动画的时长，单位ms
        });
      },
      // 获取列表数据
      getListData() {
        let that = this
        // 贵阳坐标
        let position = {
          lat: 26.557808430989585,
          lon: 106.66976399739583
        }
        // 获取坐标
        let lat = uni.getStorageSync('lat')
        let lon = uni.getStorageSync('lng')
        that.$reward.getRewardListAPI({
          lat: lat, //纬度
          lng: lon, //经度
          page: that.pageSize,
          limit: that.pageNum,
          type: that.header_index,
          order_By: that.order_By,
          platforms: that.platforms,
        }).then(res => {
          // console.log('列表数据===', res.data.result)
          that.loadText.nomore = '没有更多了'
          that.Bottomingrefresh = false
          // 处理平台数据
          res.data.result.forEach((item, index) => {
            item.apply_condition = JSON.parse(item.apply_condition)
            if(item.note_platforms.length > 0){
              const noteArr = []
              const note = JSON.parse(item.note_platforms)
              note.forEach((item2, index2) => {
                that.platformData.forEach((item3, index3) => {
                  if (item3.platformType == item2) {
                    noteArr.push({
                      platformType: item3.platformType,
                      title: item3.title,
                      image: that.imgPathUrl + item3.image,
                      apply_condition: item2 ===1 ? item.apply_condition.xhs_fansNum : item2 ===2 ? item.apply_condition.dy_fansNum : item2 === 3 ? item.apply_condition.dz_Level :  item.apply_condition.mt_Level,
                    })
                  }
                })
              })
              item.note_platforms = noteArr
            }
          })
          console.log('列表数据===', res.data.result)
          if (that.pageSize != 1) {
            if (res.data.result.length != 0) {
              that.loadingstatus = 'loading';
              that.taskLists = that.taskLists.concat(res.data.result)
            } else {
              that.loadingstatus = 'nomore'
            }
          } else {
            that.taskLists = res.data.result
            that.loadingstatus = 'nomore'
          }
          // console.log('套餐列表', that.taskLists);
          that.skeletonLoading = false
        }).catch(err => {
          if (!err.data) {
            //不存在就是访问超时或者接口错误
            //console.log('请求错误或请求超时', err.errMsg)
            that.skeletonLoading = false
            if (that.loadingstatus == 'loading') {
              that.loadingstatus = 'nomore'
              that.loadText.nomore = '网络好像出问题了~'
              that.Bottomingrefresh = true
            } else {
              that.taskLists = []
              that.loadingstatus = 'loading'
              that.loadText.nomore = '没有更多了'
              that.Bottomingrefresh = false
              that.failTimeOutShow = true
            }
          } else {
            uni.showToast({
              title: err.data.msg,
              icon: 'none',
              duration: 2000
            });
          }
        })
      },
      // 获取报名列表数据
      GetTaskOrders(){
        let that = this
        that.$reward.getTaskOrderListAPI({
          limit: 30,
          page: 1,
          status: 1,
        }).then(res => {
          if (res.data.code === 200){
            // 处理平台数据
            res.data.result.forEach((item, index) => {
              item.apply_condition = JSON.parse(item.apply_condition)
              if(item.note_platforms.length > 0){
                const noteArr = []
                const note = JSON.parse(item.note_platforms)
                note.forEach((item2, index2) => {
                  that.platformData.forEach((item3, index3) => {
                    if (item3.platformType === item2) {
                      noteArr.push({
                        platformType: item3.platformType,
                        title: item3.title,
                        image: that.imgPathUrl + item3.image,
                        apply_condition: item.apply_condition,
                        fileList: [],
                      })
                    }
                  })
                })
                item.note_platforms = noteArr
              }
            })
            res.data.result.forEach( item => {
              if (item.status === 7){
                that.taskOrderList.push(item)
              }
            })
          }
          console.log('报名列表数据===', that.taskOrderList)
        }).catch(err => {
          uni.showToast({
            title: err.data.msg,
            icon: 'none',
            duration: 2000
          });
        })
      },
      //跳转选择当前位置
      Toaddres() {
        let token = uni.getStorageSync('token')
        if (!token) {
          uni.navigateTo({
            url: '/pages/login/login'
          });
        } else {
          uni.navigateTo({
            url: '/addressPages/pages/myAddress/selectAddress'
          })
        }
      },
      //获取位置
      getplace() {
        let that = this
        uni.getLocation({
          type: 'gcj02',
          // highAccuracyExpireTime: "3000", //高精度定位超时时间(ms)
          // isHighAccuracy: true, //开启高精度定位
          success: function (res) {
            console.log('小获取经纬度', res)
            // that.keyword = res.latitude;
            // let wdu = '24.890854'
            // let jdu = '102.82961'
            let wdu = res.latitude
            let jdu = res.longitude
            uni.setStorageSync('lat', wdu);
            uni.setStorageSync('lng', jdu);
            that.Analysis(jdu, wdu)
          },
          fail: function (err) {
            // let wdu = "26.62959"
            // let jdu = "106.75208"
            // uni.setStorageSync('lat', wdu);
            // uni.setStorageSync('lng', jdu);
            // that.Analysis(jdu, wdu)
            // TODO
            uni.showToast({
              title: '授权定位失败' + JSON.stringify(err),
              icon: 'none',
              duration: 5000
            });
            that.skeletonLoading = false
            that.zanwuloc = false
            that.AddressError_show = true
          }
        });
      },
      //解析位置
      Analysis(jd, wd) {
        let that = this
        that.$api.ResolveAddress({
          lat: wd,
          lng: jd
        }).then(res => {
          console.log('解析位置', res.data.result);
          that.Address = res.data.result.district
          uni.setStorageSync('CityName', res.data.result.city)
          uni.setStorageSync('Province', res.data.result.province)
          uni.setStorageSync('address', res.data.result.recommend)
          //获取商家列表
          that.pageNum = 10
          that.pageSize = 1
          that.GetDatailsList()
        }).catch(err => {
          that.skeletonLoading = false
        });
      },
      // 筛选tab选中状态
      clickTabFun(res){
        let that = this;
        console.log('点击tab', res)
        that.selectObj = {
          selectVal: res.isFilterSelected,
          selectName: res.selectVal.name
        }
        // tab筛选赋值
        that.order_By = res.selectVal.value
        // 清空列表数据
        that.taskLists = []
        that.pageSize = 1
        that.getListData()
        // 调用滚动到指定位置的方法
        console.log('scrollHeight=', that.bannerHeight, that.processHeight, that.header_height, that.filterHeight)
        let scrollHeight = that.bannerHeight + that.processHeight- that.header_height - that.filterHeight
        that.scrollToTop(scrollHeight)
      },
      FClickTabFun(res){
        let that = this;
        console.log('点击tabF', res)
        that.selectObj = {
          selectVal: res.isFilterSelected,
          selectName: res.selectVal.name
        }
        // tab筛选赋值
        that.order_By = res.selectVal.value
        // 清空列表数据
        that.taskLists = []
        that.pageSize = 1
        that.getListData()
        // 调用滚动到指定位置的方法
        /* console.log('scrollHeight=', that.bannerHeight, that.processHeight, that.header_height, that.filterHeight)
        let scrollHeight = that.bannerHeight + that.processHeight- that.header_height - that.filterHeight
        that.scrollToTop(scrollHeight) */

      },
      // 筛选下拉菜单选中状态
      clickSelectFun(res){
        let that = this;
        console.log('点击tab', res)
        that.selectObj = {
          selectVal: res.isFilterSelected,
          selectName: res.selectVal.name
        }
        // 下拉筛选赋值
        that.platforms = res.selectVal.value
        // 清空数据列表
        that.taskLists = []
        that.pageSize = 1
        that.getListData()
      },
      FClickSelectFun(res){
        let that = this;
        console.log('点击tab', res.selectVal)
        that.selectObj = {
          selectVal: res.isFilterSelected,
          selectName: res.selectVal.name
        }
        // 下拉筛选赋值
        that.platforms = res.selectVal.value
        // 清空数据列表
        that.taskLists = []
        that.pageSize = 1
        that.getListData()
      },
      /* 倒计时 */
      findcountdown(item){
        const now = new Date().getTime();
        // 已报名，待上传笔记7
        if (item.status == 7){
          let endTime = new Date(item.expiry_date).getTime()
          let isend = endTime - now > 0 ? (endTime - now) : 0;
          let seconds = this.$moment(isend).unix();
          // console.log('结束时间', seconds)
          return seconds
        }
      },
      /* 跳转上传笔记页面 */
      goToOrderNoteFun(res){
        uni.navigateTo({
          url: '/sub_account/pages/upload_note?data=' + encodeURIComponent(JSON.stringify(res)) + '&taskSource=taskOrder'
        })
      },
      // 返回顶部
      goTop() {
        console.log('返回顶部')
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 500
        })
      },
      // 打开客服
      openService(){
        // #ifdef MP
        const data = uni.getStorageSync('customerServiceData')
        console.log('跳转到客服', data);
        wx.openCustomerServiceChat({
          //企业微信的企业id
          corpId:  data.app.corpId,
          extInfo: {
            //客服链接
            url: data.app.url
          },
          success(res) {
            //console.log('跳转成功', res)
          },
          fail(res) {
            //console.log('跳转失败', res)
          }
        })
        // #endif
      },
      // 打开教程
      toNewUser(){
        uni.navigateTo({
          url: "/subpackageB/pages/xsjc/xsjc"
        })
      },
    },
  }
</script>

<style lang="scss">
page{
  background: #F4F4F4;
  height: 100%;
  width: 100%;
}
/deep/ scroll-view ::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}
.reward{
  width: 100%;
  height: 100%;
  position: relative;
}
/* 头部css */
.header{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  .header_content{
    width: 100%;
    height: 100%;
    .header_navbar{
      padding-left: 20rpx;
      .slot-wrap{
        width: 45%;
        .nav_bar {
          height: 88rpx;
          position: relative;
          .address{
            max-width: 260rpx;
            height: 88rpx;
            line-height: 88rpx;
            font-size: 24rpx;
            color: #FFFFFF;
            padding: 0 10rpx;
          }
        }
      }
    }

  }
}
.active_header{
  background: linear-gradient( 270deg, #FFCB72 0%, #FF544B 50%, #FF4A6A 100%);
}
/* 主题内容css */
.reward_content{
  position: relative;
  .header_bg{
    width: 100%;
    height: 500rpx;
  }
  .reward_content_box{
    width: 100%;
    height: 500rpx;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    .header_banner{
      padding: 0 0 0 30rpx;
    }
    .header_tab{
      width: 100%;
      height: 120rpx;
      padding-top: 20rpx;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      .header_tab_bg{
        width: 100%;
        height: 120rpx;
        position: absolute;
        bottom: -1rpx;
        left: 0;
        right: 0;
        z-index: 1;
      }
      .header_tab_content{
        height: 100%;
        display: flex;
        justify-content: space-around;
        background: #F4F4F4;
        border-radius: 50rpx 50rpx 0 0;
        .tab_item{
          width: 50%;
          height: 90%;
          line-height: 80rpx;
          position: relative;
          z-index: 2;
          display: flex;
          justify-content: center;
          align-items: center;
          .tab_item_text{
            padding-left: 20rpx;
            font-size: 28rpx;
            color: #3D3D3D;
          }
          .tab_tip{
            height: 38rpx;
            line-height: 36rpx;
            padding: 0 8rpx;
            font-size: 20rpx;
            color: #FFFFFF;
            background: linear-gradient( 270deg, #FD5285 0%, #FE4143 38%, #FE9450 100%);
            border-radius: 200rpx 200rpx 200rpx 200rpx;
            border: 2rpx solid #FFFFFF;
            position: absolute;
            top: -8rpx;
            right: 8rpx;
          }
        }
      }
    }
  }
}
/* 浮动筛选css */
.float_box{
  width: 100%;
  // overflow: hidden;
  /* 浮动tabs */
  .tab_float_box{
    width: 100%;
    height: 90rpx;
    padding-bottom: 20rpx;
    display: flex;
    justify-content: space-around;
    .tab_float_item{
      width: 50%;
      height: 80rpx;
      line-height: 80rpx;
      position: relative;
      z-index: 2;
      display: flex;
      justify-content: center;
      align-items: center;
      .tab_float_item_text{
        padding-left: 20rpx;
        font-size: 28rpx;
        color: #FFFFFF;
      }
      .active_line{
        width: 80rpx;
        height: 8rpx;
        background: #FFFFFF;
        border-radius: 10rpx;
        position: absolute;
        bottom: -1rpx;
      }
    }
  }
  .filter_float{
    width: 100%;
    height: 90rpx;
    padding-left: 20rpx;
  }
}
/* 报名流程css */
.sign_process{
  width: 100%;
  height: 152rpx;
  padding: 0 20rpx;
  background: #FFFFFF;
  .sign_process_box{
    height: 152rpx;
    padding: 10rpx 30rpx;
    background: #FFF9EE;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .sign_process_item{
      display: flex;
      .sign_process_item_left{
        text-align: center;
        .sign_process_item_text{
          font-size: 26rpx;
          color: #3D3D3D;
          padding-top: 10rpx;
        }
      }
      .sign_process_item_right{
        padding-top: 10rpx;
        padding-left: 20rpx;
      }
    }
  }
}

/* 筛选css */
.filter{
  width: 100%;
  height: 90rpx;
  padding-left: 20rpx;
  padding-top: 20rpx;
  background: #FFFFFF;
  position: relative;
  z-index: 100;
}
/* 懒加载css */
.lanjiazai_wrap {
  position: relative;
  z-index: 10000;
  height: calc(100vh);
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: #999;
  padding-top: 100rpx;
  .lanjiazai_item {
    text-align: center;
    .loading_icon {
      width: 120rpx;
      height: 120rpx;
      .loading_gif {
        width: 120rpx;
        height: 120rpx;
      }
    }
  }

}
.shop_list_wrap_height {
  width: 100%;
  position: relative;
  z-index: 4;
}
.noData_box {
  margin-top: 0;
  padding-bottom: 260rpx;
  text-align: center;
  color: #999;
  .noData_box .noData_box_img {
    width: 240rpx;
    height: 240rpx;
  }
}


/* 列表内容css */
.list{
  position: relative;
  .list_bg{
    width: 100%;
    height: 350rpx;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background: linear-gradient( 180deg, #FFFFFF 0%, rgba(248,250,255,0) 100%);
  }
}
/* 首页待提交订单号css */
.toBeSubmit{
  width: 266rpx;
  height: 80rpx;
  position: fixed;
  right: 0;
  top: 47%;
  z-index: 100;
  border-radius: 50%;
  .toBeSubmit_box{
    height: 70rpx;
    padding: 6rpx;
    background: linear-gradient( 270deg, #FF7F14 0%, #FF5429 100%);
    border-radius: 50rpx;
    .swiper_item{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .swiper_content{
        width: calc(100% - 24rpx);
        display: flex;
        .toBeSubmit_content{
          width: calc(100% - 68rpx);
        }
        .toBeSubmit_img{
          width: 64rpx;
          height: 64rpx;
          border: 2rpx solid #FFFFFF;
          border-radius: 50%;
          overflow: hidden;
        }
        .toBeSubmit_text{
          font-size: 22rpx;
          color: #FFFFFF;
          text-align: center;
        }
        .toBeSubmit_time{
          text-align: center;
          & .uni-countdown{
            & .uni-countdown__splitor{margin: 0!important;}
          }

        }
      }
      .toBeSubmit_icon{
        width: 20rpx;
        height: 28rpx;
        display: flex;
        align-items: center;
      }
    }
  }
}


//  客服css
.server_box {
  position: fixed;
  right: 10rpx;
  bottom: 26%;
  z-index: 100;
  border-radius: 50%;

  .icon {
    width: 38rpx;
    height: 38rpx;
  }

  .text {
    font-size: 20rpx;
    color: #333;
  }
}
//帮助css
.help {
  min-height: 70rpx;
  min-width: 70rpx;
  background-color: #fdfdfd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3rpx 6rpx rgba(0, 0, 0, 0.3);
  border-radius: 100rpx;
}
/* 返回顶部 */
.scrollToTop{
  min-height: 70rpx;
  min-width: 70rpx;
  background-color: #fdfdfd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3rpx 6rpx rgba(0, 0, 0, 0.3);
  border-radius: 100rpx;
}
</style>
